<template>
	<view class="car-count">
		<view class="car-list" >
			<view class="list" v-for="(itm,gIndex) of carList" :key="itm.id">
				<view class="btn centerboth selector" v-if="itm.selected == true" @click="selThis(itm)">
					<text class="iconfont car-sel"></text>
				</view>
				<view class="btn centerboth selector" v-else @click="selThis(itm)">
					<text class="iconfont car-unsel"></text>
				</view>
				<image class="car-img" :src="itm.picUrl" mode="aspectFill" @click="goodDetailed(itm)"></image>
				<view class="car-mes centerboth">
					<view class="mes-box good-detai">
						<view class="flex-space-between">
							<view class="g-name line2">{{ itm.itemTitle }}</view>
						</view>
						<view>
							<view class="skuName">{{itm.skuName}}</view>
							<view class="flex-space-between">
								<view class="price">￥{{ (itm.salePrice/100).toFixed(2) }}</view>
								<view class="num-box centerboth">
									<text class="car-sub"@click="changeNum(itm,-1)">-</text>
									<input class="quantity-box" v-model="itm.quantity" @blur="blur(itm)"/>
									<text class="car-add"@click="changeNum(itm,1)">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="car-bottom-btn" :style="{bottom: safeAreaBottom + 'px',}" v-if="safeAreaBottom != null">
			<view class="all-sel-btn centerboth flex-content" @click="allSelBtn">
				<text v-if="allSel == true" class="iconfont car-sel"></text>
				<text v-else class="iconfont car-unsel"></text>
				<text class="all">全选</text>
				<text class="amount-box">
					合计:<text class="money"><text style="font-size: 22rpx;">￥</text>{{ (allAmount/100).toFixed(2) }}</text>
				</text>
			</view>
			
			<view class="flex-content">
				<view class="car-btn-box centerboth">
					<view class="centerboth delCars" @click="delCars">删除</view>
				</view>
				<view class="car-btn-box centerboth">
					<view class="centerboth flex-content jsCars" @click="jsCars">结算</view>
				</view>
			</view>
		</view>
		<mask-model ref="askmodel" btnType="1" @confirm="confirm" @cancel="cancel" titleColoe="#666666"
			cancelColor="#666666" confirmColor="#007AFF" :maskTitle="maskTitle"></mask-model>
	</view>
</template>
<script>
import maskModel from '@/components/mask-model/mask-model.vue'
export default {
	props: {
		carLists: {//提示信息字体颜色
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {
			maskTitle: '',
			allSel: false,
			allAmount: '0.00',
			allNumber: 0,
			delIds: '',//要删除的购物车id
			btnType: 0,//0删除  1结算
			safeAreaBottom:0,
			carList:[],
		};
	},
	mounted() {
		this.getAllMount();
	},
	watch: {
		carLists: {
			handler(arr) {
				this.carList = arr
				console.log('arr=========>',arr)
			},
			deep: true,
			immediate: true,
		},
	},
	created() {
		 // #ifdef H5
			// 获取底部安全距离
			uni.getSystemInfo({
			  success: (info) =>{
			    // 如果底部 tabBar 是常规样式（safeAreaInsets.bottom 不为0），则需要加上安全区域的高度
			     this.safeAreaBottom = info.safeAreaInsets.bottom;
			    if (this.safeAreaBottom === 0) {
			      // 如果不是在安全区域内，可能是固定高度或者自定义tabbar
					this.safeAreaBottom = 49; // 假设默认高度是49px，根据实际情况可能需要调整
			    }
			  }
			});
		// #endif
	},
	computed: {

	},
	methods: {
		confirm() {//确定按钮
			var that = this;
			console.log('您点击了确定按钮');
			if (that.btnType == 0) {
				that.$emit('delbtn', that.delIds, that.carList);
			} else {
				let ids = that.getCarIds();
				this.$emit('jsbtn', ids)
			}
		},
		cancel() {//取消按钮
			console.log('您点击了取消按钮');
		},
		jsCars() {
			var that = this;
			that.btnType = 1;
			// that.$refs.askmodel.show();
			// that.maskTitle = '是否结算选中的商品?'
			that.$emit('jsCars');
		},
		delCars() {
			var that = this;
			that.delIds = '';//清除上次删除记录
			var delIds = that.getCarIds();
			if (!delIds) {
				setTimeout(() => {
					uni.showToast({
						icon: 'none',
						title: '请选择要删除的商品',
					})
				}, 500);
				return false;
			}
			this.del(delIds)
			// that.delIds = delIds;
			// that.btnType = 0;
			// that.$refs.askmodel.show();
			// that.maskTitle = '是否将选中商品移除购物车?'
		},
		selThis(itm) { //选择商品
			var that = this;
			let carList = that.carList;
			console.log('itm===========>',itm)
			itm.selected = itm.selected ? !itm.selected : true
			that.setAllSel();
			that.$emit('selGoods', carList);
		},
		selShop(shopIndex) {
			var that = this;
			let carList = that.carList;
			if (carList[shopIndex].selected == false) {
				carList[shopIndex].selected = true;
				for (let i = 0; i < carList[shopIndex].glist.length; i++) {
					carList[shopIndex].glist[i].selected = true;
				}
			} else {
				carList[shopIndex].selected = false;
				for (let i = 0; i < carList[shopIndex].glist.length; i++) {
					carList[shopIndex].glist[i].selected = false;
				}
			}
			that.setAllSel();
			that.$emit('selShop', carList);
		},
		setAllSel() {//是否全选
			let state = true
			this.carList.map((item)=>{
				if(!item.selected) state = false
			})
			this.allSel = state;
			this.getAllMount();
		},
		allSelBtn() {//全选
			var that = this;
			this.allSel = !this.allSel;
			var carList = that.carList;
			carList.map((item)=>{
				if(this.allSel){
					item.selected =  true
				}else{
					item.selected =  false
				}
			})
			that.$emit('allSelBtn', carList);
			that.getAllMount();
		},
		getAllMount() { //计算选中总价
			var that = this;
			let allPrice = 0;
			var selNum = 0;
			let carList = that.carList;
			for (let i = 0; i < carList.length; i++) {
				// for (let k = 0; k < carList[i].glist.length; k++) {
					if (carList[i].selected == true) {
						selNum = selNum + carList[i].salePrice;
						allPrice = allPrice + (carList[i].salePrice * carList[i].quantity);
					}
				// }
			}
			that.allNumber = selNum;
			that.allAmount = allPrice;
		},
		getCarIds() { //获取要结算的商品
			var that = this;
			var carList = that.carList;
			var haveSel = [];
			that.carList.map((item)=>{
				if(item.selected) haveSel.push(item);
			})
			// for (let i = 0; i < carList.length; i++) {
			// 	for (let k = 0; k < carList[i].glist.length; k++) {
			// 		if (carList[i].glist[k].selected == true) {
			// 			haveSel.push(carList[i].glist[k].id);
			// 		}
			// 	}
			// }
			if (haveSel.length == 0) {
				setTimeout(() => {
					uni.showToast({
						icon: 'none',
						title: '请选择要结算的商品',
					})
				}, 500);
				return false;
			}
			// let cartIds = haveSel.join(',');
			// return cartIds;
			return haveSel
		},
		changeNum(itm,number) {//适用于根据数量改变购物车
			var that = this;
			that.$emit('changeNum',itm, number);
		},
		
		blur(itm) {//适用于根据数量改变购物车
			var that = this;
			that.$emit('changeNum',itm);
		},
		

		//删除商品
		del(item,index) {
			this.$emit('gdel', item);
		},

		goodDetailed(item) {
			this.$emit('detailed', item);
		},
		
		int(){
			this.getAllMount()
		}
	}
}
</script>

<style lang="scss" scoped>
@font-face {
	font-family: 'iconfont';
	/* project id 1143282 */
	src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot');
	src: url('https://at.alicdn.com/t/font_1143282_zy7677qexck.eot?#iefix') format('embedded-opentype'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff2') format('woff2'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.woff') format('woff'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.ttf') format('truetype'),
		url('https://at.alicdn.com/t/font_1143282_zy7677qexck.svg#iconfont') format('svg');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.selector{
	display: flex;
	align-items: center;
}

.car-sub {
	width: 48rpx;
	height: 48rpx;
	border: 1rpx solid #CCCCCC !important;
	color: #c8c9cc !important;
	background: #f7f8fa !important;
	text-align: center;
	line-height: 48rpx;
	font-size: 40rpx;
}

.car-add{
	width: 48rpx;
	height: 48rpx;
	background-color: #000 !important;
	color: #fff !important;
	text-align: center;
	line-height: 48rpx;
	font-size: 36rpx;
}

.quantity-box{
	width: 70rpx;
	height: 45rpx;
	background: #FFFFFF;
	border: 1rpx solid #DDDDDD;
	text-align: center;
}

.car-no:before {
	content: "\e64d";
}

.car-unsel:before {
	content: "\e63a";
}

.car-sel:before {
	content: "\e639";
}

.car-del:before {
	content: "\e622";
}

.car-count {
	width: 100%;
	padding-bottom: 120rpx;
}

.manage-btn {
	width: 100%;
	height: 75rpx;
	background: #FFFFFF;
	text-align: right;
}

.manage-btn text {
	font-size: 30rpx;
	color: #76a28c;
	line-height: 75rpx;
	padding: 0 24rpx;
}



.all-sel-btn {
	height: 100%;
	float: left;
}

.all-sel-btn .iconfont {
	margin-right: 10rpx;
	margin-top: 10rpx;
	color: #C11C2F;
}


.car-list {
	width: 100%;
	padding: 24rpx 24rpx 0 24rpx;
	box-sizing: border-box;
}

.car-list .list {
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	display: flex;
	background: #FFFFFF;
	border-radius: 10rpx;
	border-bottom: 1px solid #F5F5F5;
}

.car-list .list:nth-child(1) {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.car-list .list:nth-last-child(1) {
	margin: 0;
}

.car-list .list .btn {
	width: 70rpx;
	height: 190rpx;
}

.car-list .list .btn .iconfont {
	color: #C11C2F;
	font-size: 38rpx;
}

.car-list .list .car-img {
	width: 180rpx;
	height: 180rpx;
	border-radius: 16rpx;
}

.car-list .list .car-mes {
	flex: 1;
	margin-left: 20rpx;
}

.car-list .g-name {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #555555;
	font-style: normal;
}

.car-list .mes-box {
	width: 100%;
	
}

.good-detai{
	height: 180rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.car-list .gz-box {
	font-size: 26rpx;
	color: #999999;
	margin: 10rpx 0;
}

.skuName{
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 24rpx;
	color: #777777;
	margin-bottom: 10rpx;
}
.car-list .mes-box .price {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 30rpx;
	color: #C11C2F;
	text-align: left;
	font-style: normal;
}


.car-list .price .num {
	color: #2a2a2a;
	font-size: 28rpx;
	font-weight: normal;
	float: right;
}

.car-list .num-box {
	/* float: right; */
	display: flex;
	justify-content: flex-end;
}

.car-list .num-box .iconfont {
	font-size: 50rpx;
	color: #999999;
}

.car-list .num-box view {
	width: 60rpx;
	text-align: center;
	height: 48rpx;
	line-height:48rpx;
	font-size: 30rpx;
	color: #2A2A2A;
	border: 1rpx solid #CCCCCC !important;
}

.price-change-num .price {
	float: left;
}

.car-bottom-btn {
	position: fixed;
	width: 100%;
	height: 100rpx;
	background: #FFFFFF;
	left: 0;
	z-index: 6;
	padding: 14rpx 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.car-bottom-btn .all-cost {
	margin-right: 10rpx;
}

.car-bottom-btn .all-cost .icon {
	font-size: 28rpx;
	margin-top: 5rpx;
}

.car-btn-box {
	/* position: absolute; */
	right: 0;
	height: 100%;
	z-index: 9;
	top: 0;
}

.car-btn-box view {
	width: 150rpx;
	height: 100%;
	cursor: pointer;
}

.shop-mes {
	padding: 20rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #F5F5F5;
}

.shop-mes .iconfont {
	font-size: 38rpx;
	margin-right: 20rpx;
	color: #76a28c;
}

.shop-mes .name-mes {
	/* float: left; */
	display: flex;
	align-items: center;
}

.flex-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-space-between {
	display: flex;
	justify-content: space-between;
}

.all{
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 30rpx;
	color: #222222;
	font-style: normal;
	margin-right: 20rpx;
}

.amount-box {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 24rpx;
	color: #777777;
	font-style: normal;
	.money{
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #C11C2F;
		font-style: normal;
	}
}

.jsCars{
	width: 150rpx;
	height: 70rpx;
	background: #C11C2F;
	border-radius: 8rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 28rpx;
	color: #FFFFFF;
	line-height: 70rpx;
	font-style: normal;
	text-align: center;
	margin-left: 10rpx;
}

.delCars {
	width: 120rpx;
	height: 64rpx;
	border-radius: 10rpx;
	border: 1rpx solid #777777;
	font-weight: 600;
	font-size: 28rpx;
	color: #777777;
	line-height: 64rpx;
	text-align: center;
	margin-left: 10rpx;
}
</style>
